<template>
  <div class="listitems" v-if="arr">
    <el-row :gutter="20" class="listitem">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <img :src="arr.coverImgUrl" class="image" />
        </div>
      </el-col>
      <el-col :span="16"
        ><div class="grid-content bg-purple">
          <el-card :body-style="{ padding: '10px' }">
            <div class="txt">
              <span>{{ arr.description }}</span>
            </div>
            <div class="songname">
              <p>
                <i class="iconfont icon-jurassic_user"></i>&nbsp;{{ arr.name }}
              </p>
            </div>
            <div class="listen_num">
              <p>
                标签：<span v-for="item in arr.tags" :key="item.id"
                  >{{ item }}&nbsp;&nbsp;</span
                >
              </p>
              <p>播放量：{{ (arr.playCount / 1000).toFixed(1) }}万</p>
              <p>收藏量：{{ (arr.shareCount / 10).toFixed(1) }}万</p>
            </div>
            <el-row class="actions" v-show="arr">
              <router-link to="/player">
                <el-button type="success" size="large" @click="setGoods">
                  <i class="iconfont icon-24gl-play"></i>&nbsp; 播放全部
                </el-button>
              </router-link>
              <el-button size="large" @click="showChange">
                <i
                  class="iconfont icon-shoucang"
                  :class="show ? 'icon-shoucang1' : 'icon-shoucang'"
                ></i
                >&nbsp;收藏</el-button
              >
              <el-button size="large" @click="toBottom"
                ><i class="iconfont icon-pinglun"></i>&nbsp;评论（{{
                  arr.commentCount
                }}）</el-button
              >
              <el-button size="large"
                ><i class="iconfont icon-gengduo"></i>&nbsp;更多</el-button
              >
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="songlist">
      <!-- 歌曲列表 -->
      <el-col :span="16">
        <ul class="songlistTop">
          <li></li>
          <li>歌曲</li>
          <li>歌手</li>
          <li>专辑</li>
        </ul>
        <ul class="songlists">
          <li v-for="(item, i) in goodsChange" :key="i">
            <div>{{ index * num + i + 1 }}</div>
            <div>
              <div class="list-menu">
                <div><i class="iconfont icon-jiahao"></i></div>
                <div><i class="iconfont icon-24gl-play"></i></div>
              </div>
              <div class="list-left">{{ item.name }}</div>
            </div>
            <div>{{ item.ar[0].name }}</div>
            <div>{{ item.al.name }}</div>
          </li>
        </ul>
        <!-- 分页 -->
        <div class="pagination" v-show="lengs/10>1">
          <el-pagination
            layout="prev, pager, next"
            ref="pagination"
            @current-change="currentChange"
            :total="lengs"
            @prev-click="nextclick"
            @next-click="nextclick"
          />
        </div>
      </el-col>
      <!-- 简介 -->
      <el-col :span="6">
        <div class="grid-content bg-purple jianjie">
          <b>简介</b>
          <p>{{ arr.description }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref, computed, toRefs } from "vue";
import { getSongList, getSongLists } from "@/api";
import { useStore } from "vuex";
export default {
  name: "listitem",
  setup() {
    let data = reactive({ arr: [], lists: [], id: "", songs: [] });
    let show = ref(false);
    let leng = ref(0);
    let lengs = ref(0);
    let index = ref(0);
    var goodsChange = null;
    let pagination = ref(null);
    const num = 10;
    const route = useRoute();
    const store = useStore();
    onMounted(async () => {
      let id = route.query.id;
      let res = await getSongList(id);
      data.arr = res.data.playlist;
      data.lists = res.data.privileges;
      data.lists.forEach((item) => {
        data.id += item.id + ",";
      });
      data.id = data.id.slice(0, -1);
      getSongLists(data.id).then((res) => {
        data.songs = res.data.songs;
      });
      // document.querySelector(".jianjie p").innerHTML = data.arr.description;
      lengs.value = data.lists.length;
      leng.value = Math.ceil(lengs.value / num);
    });
    function currentChange(current) {
      index.value = current - 1;
    }
    function nextclick(current) {
      index.value = current - 1;
    }
    goodsChange = computed(() => {
      if (data.songs) {
        return data.songs.slice(
          index.value * num,
          index.value * num + num > data.lists.length
            ? data.lists.length
            : index.value * num + num
        );
      }
    });

    function showChange() {
      show.value = !show.value;
    }
    function toBottom() {
      window.scrollTo(0, document.querySelector(".listitems").scrollHeight);
    }
    function setGoods() {
      store.commit("setGoods", data.songs.slice(0, 10));
      store.commit("setName", data.songs[0].name);
      store.commit("setSongName", data.songs[0].ar[0].name);
      store.commit("setAblumName", data.songs[0].al.name);
      store.commit("setPicUrl", data.songs[0].al.picUrl);
      store.commit("setId", data.songs[0].id);
      localStorage.setItem("userMsg", JSON.stringify(store.state));
    }
    return {
      ...toRefs(data),
      show,
      showChange,
      goodsChange,
      lengs,
      num,
      index,
      pagination,
      currentChange,
      nextclick,
      toBottom,
      setGoods,
    };
  },
};
</script>

<style lang="less" scoped>
.listitems {
  .listitem {
    margin: 40px 0 35px;
    .el-col {
      text-align: left;
      img {
        width: 250px;
        height: 250px;
        display: block;
      }
      .el-card {
        width: 100%;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        text-align: left;
        .txt {
          width: 450px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 31px;
          font-weight: 400;
          margin-top: 0;
          margin-bottom: 0;
          height: 50px;
          line-height: 50px;
        }
        p {
          margin: 0;
          height: 27px;
          line-height: 27px;
        }
        .listen_num {
          margin-top: 8px;
          margin-bottom: 10px;
        }
        .actions {
          .el-button {
            margin: 0 12px 0 0;
          }
          .el-button:active {
            border: 1px solid #c6e2ff;
          }
          .iconfont {
            font-size: 22px;
          }
          a {
            display: inline-block;
            text-decoration: none;
          }
        }
      }
    }
    .icon-jurassic_user {
      font-size: 24px;
      font-weight: 600;
    }
  }
  .songlist {
    text-align: left;
    .songlistTop {
      display: flex;
      color: #999;
      li {
        flex: 1;
        padding: 8px 0 8px 0px;
        border-bottom: 1px solid #dcdfe6;
        list-style: none;
      }
    }
    .songlists {
      li {
        display: flex;
        height: 40px;
        justify-content: space-around;
        position: relative;
        div {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          flex: 1;
          padding: 16px 0 8px 0px;
          border-bottom: 1px solid #dcdfe6;
          vertical-align: middle;
          line-height: 100%;
          .list-left {
            padding: 0;
            border: 0;
            width: 100%;
            height: 100%;
          }
          .list-menu {
            width: 0;
            height: 32px;
            padding: 0;
            border: 0;
            float: right;
            position: relative;
            top: -25px;
            right: 30px;
            white-space: nowrap;
            opacity: 0;
            div {
              padding: 0;
              float: right;
              width: 30px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              border: 1px solid #dcdfe6;
              border-radius: 50%;
              margin-left: 20px;
            }
            div:hover {
              border-color: #31c27c;
              .iconfont {
                color: #31c27c;
              }
            }
            .iconfont {
              height: 27px;
              font-size: 22px;
            }
          }
        }
      }
      li:hover {
        .list-left {
          width: 70%;
        }
        .list-menu {
          width: 25%;
          opacity: 1;
          top: -12px;
          right: 30px;
          transition: all 100ms;
          position: relative;
          background: #fff;
        }
      }
    }
    .songlistTop > li:nth-child(1),
    .songlists li > div:nth-child(1) {
      flex: 0.4;
      padding-left: 5px;
      color: #999;
    }
    .songlistTop > li:nth-child(2),
    .songlists li > div:nth-child(2) {
      flex: 5;
      padding-left: 20px;
    }
    .jianjie {
      padding: 24px 0 0;
      margin-left: auto;
      height: 450px;
      p {
        font-size: 14px;
        line-height: 22px;
        font-weight: 400;
      }
    }
  }
}
</style>
<style scoped>
.el-pagination {
  width: 50%;
  color: #444;
  margin-left: 8%;
}
.el-pagination :deep(button),
.el-pagination:deep(ul) li {
  width: 60px;
  height: 40px;
  padding: 0 10px;
}
</style>
